Client:      AJAX Library

Server:    AJAX Extensions

                 AJAX Control Toolkit

XMLHTTP protocol

AJAX Extensions:

·       All AJAX enabled pages must contain the ScriptManager component.

·       Installer (ASPAJAXExtSetup.msi) can be downloaded from http://asp.net/ajax/downloads/

·       UpdatePanel control:

o   Defines a region that will be a partial-page postback.

o   Any control within the panel's ContentTemplate tag that triggers a post-back will now (by default) trigger a partial-post back that updates the contents of the ContentTemplate tag only. Such controls include regular buttons and the AJAX Timer control.

o   Triggers:
UpdatePanel has a Triggers collection tag that can contain the following tags (examples of which can be found in the ‘Coding AJAX Pages’ section below):

§  PostBackTrigger
The specified posting back control in the UpdatePanel will now post back the entire page (instead of the default behavior of a partial post-back)

§  AsyncPostBackTrigger
The specified event of the specified control (which can be any control on the page) will trigger the partial post-back of the UpdatePanel we are in.

·       UpdateProgress control: Used to show progress during a partial-page postback. This control is global for the page and does not (for example) need to be embedded inside UpdatePanel.

·       Timer control

o   Inside an UpdatePanel, triggers a partial post-back of that panel at the scheduled interval.

o   Outside an UpdatePanel, must be linked to a panel using the AsyncPostBackTrigger. This approach is normally used to allow multiple panels need to be refreshed from the same timer.

·       AutoCompleteExtender: Associates a web-service with a text box, then calls that web-service when the contents of the text box change.

AJAX Control Toolkit:

·       Client Component Template: Used to create new client side controls

·       Server Controls: Additional out-of-the-box AJAX controls

AJAX Library:

·       Browser Compatibilty Layer: Browser abstraction

·       Core Services: Extends JavaScript to support OOP (inc. subclassing and PEMs) [*** I thought JavaScript already had a rudimentary class & PEM system] and gives it a <quote>look a lot like C#</quote>
Adds:

o   Namespace support
To register a namespace for use: Type.registerNamespace(“theNamespace”). Cheat sheet.

o   Abstract classes

o   Interfaces

o   JSON (or rather, integrates it. For example, serialization & deserialization of types used / returned by web-service calls)

o   Adds pageLoad

o   $create(…, $get(‘htmlId’)) creates the AJAX control/event and links it with HTML control / jscript event handler

·       Networking Layer: Support for Async post-back, web-service calls, etc.

·       UI Layer: Classes that represent UI components

·       Controls Layer: Behaviors and Jscript code

Coding AJAX Pages:

1.       Include ScriptManager server control (if using master pages, this can be done on the master page)

2.       Include System.Web.Extensions.dll

3.       Update web.config (if you use the AJAX template added to VS IDE project list this will be done for you automagically)

4.       AJAX 'Hello World' example:

    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    Outside: <% = DateTime.Now %>

    <asp:Button ID="cmdOutside" runat="server" Text="Outside" />

    <asp:UpdatePanel id="up" runat="server"><ContentTemplate>

        Inside: <% = DateTime.Now %>

        <asp:Button ID="cmdInside" runat="server" Text="inside" OnClick="cmdInside_Click" />

    </ContentTemplate> </asp:UpdatePanel>

    <asp:UpdateProgress id="udp" runat="server">

        <ProgressTemplate>

            Please Wait

        </ProgressTemplate>

    </asp:UpdateProgress>

5.       Force full page postback example (modifies above example)

    <asp:UpdatePanel id="up" runat="server">

        <Triggers><asp:PostBackTrigger ControlID="cmdInside" /></Triggers>

        <ContentTemplate>…

6.       Force full page postback example (modifies above example)

    <asp:UpdatePanel id="up" runat="server">

        <Triggers><asp:PostBackTrigger ControlID="cmdInside" /></Triggers>

        <ContentTemplate>…

7.        

Coding AJAX Web Services:

1.       Include System.Web.Script.Services

2.       Add [ScriptService] attribute to the web-service class

3.       Update web.config for the asmx handlers (again, can steal from VS IDE AJAX template project)

4.       Add a <Services><ServiceReference> to the ScriptManager

5.       Can only call web services in the same domain [TODO confirm / clarify]

6.       Page level web methods:

a.       Server side code is a method on the page

b.      Must be static

c.       Must marked with the [WebMethod] attribute

d.      Called from client with the syntax PageMethods.webMethodName